<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>{{Data.标题}}</title>
    <link rel="stylesheet" href="/static/css/w3.css">
</head>

<body>
  <header class="w3-container w3-light-grey"><h3 class="w3-xlarge">Knogen.cn</h3>
  </header>
    <div class="w3-center"><h2>{{Data.表名}}</h2></div>
    <ul class="w3-navbar w3-green">
    {% for line in Table%}
      <li><a class="ayear" id="year{{line[0]}}" href="#" onclick="openYear('{{line[0]}}')">{{line[0]}}</a></li>
    {% endfor %}
    </ul>

{% for line in Table %}
    <div id="{{line[0]}}" class="w3-container year">

          <table class="w3-table w3-striped w3-bordered w3-border w3-hoverable">
          <thead>
          <tr class="w3-light-grey">
            {% for v in range(line[1][0]|count) %}
            <th {% if flag==v %} class="w3-yellow" {% endif %} >{{ line[1][0][v] }}</th>
            {% endfor %}
          </tr>
          </thead>
          {% for i in range(1,line[1]|count) %}
          <tr {% if cityName in line[1][i][0] %} class="w3-yellow" {% endif %}>
            {% for v in range(line[1][i]|count) %}
            <td {% if flag==v %} class="w3-yellow" {% endif %} >{{ line[1][i][v] }}</td>
            {% endfor %}
          </tr>
          {% endfor %}
          </table>

    </div>
{% endfor %}
    <footer>
        <p>来源：{{Data.来源}}</p>
        {% if Data.标注 %}
        <p>标注：{{Data.标注}}</p>
        {% endif %}
    </footer>
  <script src="//cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
openYear("{{Table[0][0]}}");

function openYear(cityName) {

  $('.ayear').removeClass("w3-yellow");
  $('#year'+cityName).addClass("w3-yellow");
  var i;
  var x = document.getElementsByClassName("year");
  for (i = 0; i < x.length; i++) {
      x[i].style.display = "none";
  }
  document.getElementById(cityName).style.display = "block";
}
</script>
</body>

</html>
